<template>
  <div id="shop_class">
    <HeaderStatus></HeaderStatus>
   
  <div class="mui-content">
       <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
          <div class="mui-scroll">
              <a @tap="select_class(k)" :class="k==class_index?'mui-control-item mui-active':'mui-control-item'" v-for="(i,k) in class_list" :key="k">
                  {{i.name}}
              </a>
          </div>
      </div>
      
       <scroller 
        :on-refresh="refresh"
        delegate-id="myScroller"
        ref="my_scroller"
        :on-infinite="infinite"  style="top:4rem"  >
        <div class="goods_list">
          <div class="goods_panel_small" v-for="(i,k) in goods_list" :key="k" @tap="go_goods_detail(i.goodsid)">
            <div class="goods_img"><img :src="i.pic" alt=""></div>
            <div class="goods_title">{{i.name}}</div>
            <div class="goods_price">￥{{i.min_price}}</div>
          </div>
        </div>
      </scroller>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
  </div>
</template>
<script>
import goods_class_ajax from "../../ajax/goods_class_ajax";
import HeaderStatus from "../../components/Header";
import goods_ajax from "../../ajax/goods_ajax";
export default {
  data() {
    return {
      class_list: [],
      class_index: 0,
      class_active_index: "",
      class_list_lv2: [],
      goods_list: [],
      tid: 0,
      page_num: 1,
 
    };
  },
  methods: {
    refresh(done) {
      done()
      // this.page_num=1;
      // this.goods_list=[];
      // this.get_goods_list(done);
    },
    infinite(done) {
      console.log("load more")
      
      
      let that = this
      setTimeout(function () {
         
        that.get_goods_list(function(tf){
          done(tf)
        })
        
      }, 1500)


      // this.get_goods_list( function () {
      //    done()
      // })
      // setTimeout(() => {
      //   done(true);
      // }, 1500);
    },
    go_goods_detail(goodsid) {
      this.$router.push("/shop/goods_list/goods?goodsid=" + goodsid);
    },
    // 获取商品二级菜单
    get_goods_class_lv2(k, tid) {
      this.class_active_index = k;
      console.log(tid);
      goods_class_ajax.get_goods_class_lv2(
        {
          tid: tid,
          bid: this.$store.state.account.community.sqid
        },
        res => {
          this.class_list_lv2 = res;
        }
      );
    },
    get_goods_list(callback) {
      if(!callback){
        callback = new Function()
      }
      console.log("加载第"+this.page_num+"页")
      goods_ajax.get_class_goods_list(
        {
          bid: this.$store.state.account.community.sqid,
          tid: this.tid,
          page: this.page_num
        },
        res => {
          console.log(res.length+"条数据");
          if(res.length==0){
            console.log("没有数据了")
             callback(true)
            return
          }
          if(this.page_num == 1){
               this.goods_list = res;
               this.page_num++;
               callback(false)
          }else{
             
              this.goods_list = this.goods_list.concat(res)
              this.page_num++;
              callback(false)
              
              
            }
            
            
          }
          
        
      );
    },
    go_page(tid) {
      if (tid) {
        this.$router.push("/shop/goods_list?type=normal&tid=" + tid);
      }
    },
    open_search_view(tf) {
      this.$store.commit("open_search_view", tf);
    },
    select_class(k) {
      console.log(k);
      this.tid = this.class_list[k].tid;
      this.page_num = 1;
      this.goods_list = [];
      
    },
    load_more_data() {
      console.log("load_more_data");
    }
  },
  created() {
    this.class_list = this.$store.state.goods_class.class_list;
    this.$store.commit("change_header", {
      header_text: "分类",
      header_right_func: false,
      header_right_html: "<span></span>",
      header_back_btn: false
    });
    this.tid = this.class_list[0].tid;
    // this.get_goods_list();
  
  },
  components: {
    HeaderStatus
  },
  mounted() {
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
    document.querySelector("._v-container").style.height= document.body.clientHeight-50-88+"px";
  }
};
</script>


<style lang="less" scoped>
@import "../../../static/pxvalue.less";

.mui-content {
  background-color: #fff;
  padding-top: 88px;
}
.mui-control-item {
  box-sizing: border-box;
  border-bottom: 3px solid transparent !important;
}
.mui-active {
  border-bottom: 3px solid #007aff !important;
}
.mui-scroll-wrapper {
  height: 44px;
  position: fixed;
  top: 44px;
  left: 0px;
  width: 100%;
  background-color: #fff;
}

.goods_list {
  width: @p680;
  margin-left: @p35;
  overflow: hidden;

  .goods_panel_small {
    width: @p330;
    float: left;
    overflow: hidden;
    margin-bottom: @p30;
    .goods_img {
      width: 100%;
      height: @p330;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .goods_title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: @p22;
    }
    .goods_price {
      color: #00a0e9;
      font-size: @p26;
      padding-left: @p10;
    }
  }
  .goods_panel_small:nth-child(even) {
    margin-left: @p16;
  }
}
</style>


